<script setup>
import { onMounted, ref } from 'vue';
import { getMessagePage } from '../../../apis/messageApi';
// 任务列表数据
  const notifyList = ref([])

  const page = ref(1)
  // 每页包含数据条数
  const pageSize = ref(5)
  // 是否为空列表
  const isEmpty = ref(false)
  const isLoading = ref(false)

  const getNotifyList = () => {
    isLoading.value = true
    getMessagePage(201,page.value,pageSize.value,res => {
      if(res.code === 200){
        for(let i=0;i < res.data.items.length;i++){
          notifyList.value.push(res.data.items[i])
        }
      }else{
        showFailToast('获取消息列表失败')
      }
      isLoading.value = false
    })
  }
   // 生命周期
    onMounted(() => {
      getNotifyList()
    })

    function getClassList(item){
      if(item.isRead){
        return ['title','unread']
      }else{
        return ['title']
      }
    }
</script>
<template>
  <scroll-view class="scroll-view" refresher-enabled scroll-y>
    <view class="scroll-view-wrapper">
      <view class="message-action">
        <text class="iconfont icon-clear"></text>
        全部已读
      </view>
      <template v-for="item in notifyList" :key="item.id">
        <uni-card :border="false" :is-shadow="false">
          <view class="brief">{{item.content}}</view>
          <view class="extra">
            <text class="time">{{item.created}}</text>
            <navigator
              hover-class="none"
              class="link"
              :url="`/subpkg_task/detail/index?id=${item.relevantId}`"
              >查看详情</navigator
            >
          </view>
          <template v-slot:title>
            <view :class="getClassList(item)">{{item.title}}</view>
          </template>
        </uni-card>
      </template>




      <view v-if="false" class="message-blank">暂无消息</view>
    </view>
  </scroll-view>
</template>

<style lang="scss" scoped>
  @import './styles.scss';
</style>
